<template>
  <div class="content ">
    <div class="operation">
      <router-link style="text-decoration: none" :to="{name:'newBlog',params: {isNew:true}}">
        <el-button type="primary" @click="" icon="el-icon-circle-plus-outline">
          添加博客
        </el-button>
      </router-link>
    </div>
    <!-- <div class="content " v-infinite-scroll="load" style="overflow:auto"> -->
    <div class="blog" v-for="(item, index) in blogList" :key="index">
      <div>
        <div class="title">
          {{ item.title }}
        </div>
        <div class="btns">
          <el-row>
            <router-link STYLE="text-decoration: none" :to="{ name:'newBlog', params: { item:item,isNew:false} }">
              <el-button size="mini">
                更新博客
              </el-button>
            </router-link>
            <el-button @click="deleteUserById(item.id)" size="mini" type="warning">删除博客</el-button>
          </el-row>
        </div>
      </div>
      <div class="tag">
        <el-tag size="small" @close="close(item.id, everyTag.id)" closable v-for="everyTag in item.tag"
                :key="everyTag.name">
          {{ everyTag.name }}
        </el-tag>
      </div>
      <router-link style="text-decoration: none" :to="{name:'blogInfo',params:{itemBlog:item}}">
        <div class="blog-content" v-html="item.noImgContent">
          {{ item.noImgContent }}
        </div>
      </router-link>
      <div class="footer">
        <el-row :gutter="20" justify="space-between">
          <el-col :span="6">
            <div class="grid-content bg-purple">创建时间:{{ item.createTime }}</div>
          </el-col>
          <el-col :span="6">
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">更新时间:{{ item.updateTime }}</div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="page">
      <el-pagination :page-size="5" layout="prev, pager, next" @current-change="curChange" :total="total">
      </el-pagination>
    </div>
    <div>
      <el-dialog :visible.sync="dialogFormVisible" width=30% title="tag选择">
        <el-form>
          <el-form-item label="博客标签">
            <el-checkbox-group v-model="tag">
              <span style="width:200px">
                <el-checkbox v-for="(item, index) in checkBox" :key="index" :label="item.id" :disabled="item.disabled"
                             name="type">{{ item.name }}
                </el-checkbox>
              </span>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      total: 0,
      blogList: [],
      page: 0,
      size: 10,
      checkBox: [],
      dialogFormVisible: false,
      tag: [],
      curBlogId: ""
    }
  },
  methods: {
    /**
     * 根据userid 分页获取 blog
     * @param {*} page
     * @param {*} size
     */
    getBlogTagVoById(page, size) {
      let currentUser = localStorage.getItem("userid");
      this.$api.getBlogTagVoById({
        page: page,
        size: size,
        userId: currentUser
      }).then(res => {
        if (res.code === 200) {
          this.blogList = [];

          this.blogList = res.data.records;
          for (let i = 0; i < this.blogList.length; i++) {
            this.blogList[i].noImgContent=this.blogList[i].content;
            this.blogList[i].noImgContent =this.blogList[i].noImgContent.replace(/<\/?(img)[^>]*>/gi, '');
          }

          this.total = res.data.total;

        }

      });
    },
    curChange(val) {
      console.log(val)
      this.getBlogTagVoById(val, this.size);
    },
    /**
     * 关闭标签 一条
     * @param {*} bid
     * @param {*} tid
     */
    close(bid, tid) {
      console.log(bid, tid)
      this.$api.deleteByTagId({
        blogId: bid,
        tagId: tid,
      }).then(res => {
        if (res.code === 200) {
          this.getBlogTagVoById(this.page, this.size)
        } else {
          this.$message({
            message: '未知错误',
            type: 'error'
          });
        }
      });
    },
    /**
     * 根据 bid uid 删除 user_blog
     * @param {*} bid
     */
    deleteUserById(bid) {
      let uid = localStorage.getItem("userid");
      this.$api.deleteUserById({
        bid: bid,
        uid: uid,
      }).then(res => {
        if (res.code === 200) {
          this.getBlogTagVoById(this.page, this.size)
        } else {
          this.$message({
            message: '失败',
            type: 'error'
          });
        }
      });
    },
    /**
     * 获取 tagList
     */
    getTag() {
      this.$api.selectTag(
      ).then(res => {
        console.log(res)
        if (res.code === 200) {
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].disabled = false;
            this.checkBox.push(res.data[i]);
          }
        }
      });
    },
    getBlogId(bid, tags) {

      this.tag = [];
      this.curBlogId = bid;
      this.dialogFormVisible = true;
      for (let i = 0; i < this.checkBox.length; i++) {
        for (let j = 0; j < tags.length; j++) {
          if (this.checkBox[i].name === tags[j].name) {
            this.checkBox[i].disabled = true;
          }

        }

      }
    },

    //提交tag添加的
    onSubmit() {

      // console.log(this.tag, this.curBlogId)
      let blogTagArr = [];
      for (let i = 0; i < this.tag.length; i++) {
        let obj = {
          blogId: '',
          tagId: ''
        }
        obj.tagId = this.tag[i];
        obj.blogId = this.curBlogId;
        blogTagArr.push(obj);
      }


      // console.log(blogTagArr)
      this.$api.insertBlogTag(
          blogTagArr
      ).then(res => {
        // console.log(res)
        if (res.code === 200) {
          this.dialogFormVisible = false;
          this.getBlogTagVoById(this.page, this.size);
          // console.log(res)

        } else if (res.code === 501) {
          this.$message({
            message: '标签重复，取消重复标签',
            type: 'error',
            duration: 200
          });
        }
      });


    },
    /**
     * 更新blog跳转
     */
    navigatorNewBlog() {

    }

  }, created() {

    this.getBlogTagVoById(this.page, this.size);
    this.getTag();

  }
}
</script>
<style scoped lang="scss">
.content {
  //height: 800px;
}

.blog {
  border-bottom: 1px solid rgba(0, 0, 0, 0.027);
  width: 95%;
  margin: auto;

  .title {
    font-size: 20px;
    font-weight: 600;
    margin-top: 20px;

  }

  .tag {
    margin-top: 10px;
  }

  .blog-content {
    width: 100%;
    height: 60px;
    // background-color: aqua;
    padding-top: 10px;
    padding-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; // 在第几行显示
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
  }

  .footer {
    text-align: center;
    font-size: 12px;
    color: rgba(5, 48, 48, 0.199);
  }

  .btns {
    float: right;
  }


}

.page {
  height: auto;
  margin-top: 20px;
  width: 500px;
  // background-color: black;
}
</style>
